<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:p="http://primefaces.org/ui"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:form id="frmMenuBar">
        <p:remoteCommand id="cmdSair"
                         name="sair"
                         onstart="$('#modal-sair').modal('show'); return false;"/>
        <p:remoteCommand id="cmdConfirmarSair"
                         name="confirmarSair"
                         actionListener="#{sessionController.sair()}"/>
        <p:remoteCommand id="cmdCancelarSair"
                         name="cancelarSair"
                         onstart="$('#modal-sair').modal('hide'); return false;"/>

        <div id="modal-sair" class="modal hide fade">
            <div class="modal-header">
                <h:panelGrid columns="2" cellpadding="5">
                    <p:graphicImage value="/resources/img/logout.png" />
                    <h3 id="modal-title">Sair</h3>
                </h:panelGrid>
            </div>
            <div class="modal-body">
                <p class="center" id="modal-content">Deseja realmente sair do sistema, #{sessionController.usuarioLogadoNome}?</p>
            </div>
            <div class="modal-footer">
                <button id="btnSair"
                        type="button"
                        class="btn btn-primary"
                        onclick="confirmarSair();">
                    <i class="icon-off icon-white"></i>
                    Sair
                </button>

                <button id="btnCancelar"
                        type="button"
                        class="btn"
                        onclick="cancelarSair();">
                    <i class="icon-remove"></i>
                    Não, espere!
                </button>
            </div>
        </div>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="javascript: void(0);">
                        <div class="navbar-logo">
                            <img src="/EHomeWebApplication/resources/img/navbar-logo1.png" id="logo" title="e-Home - Automação Residencial" />
                        </div>
                    </a>
                    <div class="menu-user">
                        <ul class="nav pull-right">
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="javascript: void(0);">
                                    <i class="icon-user icon-white"></i> #{sessionController.usuarioLogadoNome}
                                    <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <c:if test="#{sessionController.usuarioLogado != null
                                                  and sessionController.usuarioLogado.usuCodigo ne 0}">
                                        <li>
                                            <a onclick="visualizarPerfil();">
                                                <i class="icon-user"></i>
                                                Perfil
                                            </a>
                                        </li>
                                        <li>
                                            <a onclick="changePassword();">
                                                <i class="icon-refresh"></i>
                                                Trocar a Senha
                                            </a>
                                        </li>
                                        <li class="divider"></li>
                                    </c:if>
                                    <li>
                                        <a href="#">
                                            <i class="icon-info-sign"></i>
                                            Sobre
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a onclick="sair();">
                                            <i class="icon-off"></i>
                                            Sair
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </h:form>
</ui:fragment>